<script setup>
  import {ref} from 'vue'
  // 引入多个.vue组件
  import Header from './components/Header.vue'
  import Navigator from './components/Navigator.vue'
  import Content from './components/Content.vue'

  let menu = ref("")
  // data为子组件提交过来的数据
  function receiver(data){
    menu.value = data
  }

</script>

<template>
  <div>
    <Header class="Header"></Header>
    <!-- 这里的sendMenu应该是跟子组件中注册的事件对象保持一致,这里receiver只有函数名 -->
    <Navigator class="Navigator" @sendMenu="receiver"></Navigator>
    <!-- message 属性是自己随便定义的,但在父传子的那个子组件接收时，应该保持一致 -->
    <Content class="Content" :message="menu"></Content>
  </div>
 
</template>

<style scoped>
  .Header{
    height: 50px;
    border: 1px solid red;
  }
  .Navigator{
    width: 15%;
    height: 800px;
    border: 1px solid green;
    /* 使得组件浮动起来 */
    float: left;
  }
  .Content{
    width: 84%;
    height: 800px;
    border: 1px solid blue;
    float: right;
  }
</style>
